<template>
  <scroll-view scroll-y class="card">
    <view class="title">非常感谢您的赞助，详情请联系朱老师</view>
    <view class="image">
      <image class="image_item" src="../../static/pay/wx_skm.jpg"></image>
      <image class="image_item" src="../../static/pay/zfb_skm.jpg"></image>
    </view>
    <view class="record">公布赞助记录</view>
    <view class="card_item" v-for="item in sponsorList" :key="item.add_time">
      <view class="item1">
        <text class="content1">赞助者：{{ item.user_info.nickname }}</text>
        <text class="content2">赞助金额：￥{{ item.amount }}</text>
        <text class="content1">日期：{{ item.publish_date }}</text>
      </view>
      <p class="content1">备注：{{ item.remarks }}</p>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SponsorItem } from '@/types/home'
import { getSponsorAPI } from '@/services/home'
const sponsorList = ref<SponsorItem[]>([])
import { onLoad } from '@dcloudio/uni-app'
// 获取所有的赞助记录
const getSponsorData = async () => {
  const res = await getSponsorAPI()
  console.log('所有捐款：', res.results)
  if (Array.isArray(res.results) && res.results.length > 0) {
    sponsorList.value = res.results
    console.log('赞助数据：', sponsorList.value)
    for (let i = 0; i < sponsorList.value.length; i++) {
      sponsorList.value[i].user_short = sponsorList.value[i].user_info.nickname.slice(0, 1) + '老师'
    }
  } else {
    uni.showToast({ icon: 'error', title: '获取失败' })
  }
}
// 页面加载
onLoad(async () => {
  getSponsorData()
})
</script>
<style lang="scss" scoped>
.image {
  display: flex;
  flex-flow: row nowrap;

  .image_item {
    margin: 14rpx;
    width: 400rpx;
    height: 400rpx;
  }
}

.card {
  display: flex;

  .title {
    font-size: 27rpx;
    text-align: center;
    background-color: antiquewhite;
  }

  .record {
    font-size: 26rpx;
  }
}

.card_item {
  font-size: 28rpx;
  display: flex;
  flex-flow: column nowrap;
  border-radius: 10rpx;
  border-color: aliceblue;
  border-style: solid;
  background-color: aliceblue;
  margin: 5rpx;

  .item1 {
    display: flex;
    flex-flow: row nowrap;
    margin: 10rpx;
  }

  .content1 {
    margin: 5rpx;
    color: green;
  }

  .content2 {
    margin: 5rpx;
    color: #00bf9c;
  }
}
</style>